<template>
  <div class="barrage" :style="{ width: maxWidth }">
    <div class="content" :style="{ fontSize: textSize }" ref="content">
      <transition-group appear tag="div">
        <div v-for="item in barrageList" :key="item.id" class="item" @click="removeComment">
          <slot name="card">
            <img :src="iconUrl" alt="" class="icon" />
            {{ item.text }}
          </slot>
        </div>
      </transition-group>
    </div>
    <div class="toolBox">
      <el-input v-model="comment" placeholder="请输入内容" clearable @keyup.enter.native="postComment"></el-input>
      <el-button @click="postComment">发布评论</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Barrage',
  props: {
    initBarrageList: {
      type: Array,
      default() {
        return {}
      }
    },
    maxWidth: {
      type: String,
      default: '400px'
    },
    // maxHeight: {
    //   type: String,
    //   default: '400px'
    // },
    textSize: {
      type: String,
      default: '16px'
    },
    textLength: {
      type: Number,
      default: 50
    },
    iconUrl: {
      type: String,
      default: require('../assets/logo.png')
    },
    maxSize: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      comment: '',
      barrageList: [{ id: 1, text: '欢迎进入直播间！！~' }],
      intervalId: null
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    // 发射弹幕
    postComment() {
      if (this.comment == '') {
        return this.$message.warning('请输入内容！')
      }
      if (this.comment.length > this.textLength) {
        return this.$message.warning('内容字数过长！')
      }
      this.barrageList.push({ id: new Date().getTime(), text: this.comment })
      this.comment = ''
      this.removeComment()
    },

    // 初始化弹幕
    getCommentList() {
      let intervalId = null
      intervalId = setInterval(() => {
        if (this.initBarrageList.length === 0) {
          return clearInterval(intervalId)
        }
        this.barrageList.push(this.initBarrageList.shift())
        this.removeComment()
      }, 500)
    },

    // 当弹幕条数大于限制的最大值时，每新增一条则删除第一条弹幕
    removeComment() {
      if (this.barrageList.length > this.maxSize) {
        this.barrageList.shift()
      }
    }

    // 实时获取盒子的高度
    // scrollToBottom() {
    //   this.$nextTick(() => {
    //     let box = this.$refs.content
    //     box.scrollTop = box.scrollHeight
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
.barrage {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 0 20px 0 0;
  margin: 0 0 0 4px;
  //   background-color: rgba(87, 85, 85, 0.2);
  animation: topMove 1s linear;
  .content {
    overflow-x: hidden;
    overflow-y: hidden;
    .item {
      width: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      margin: 10px 0;
      padding: 4px 4px 4px 10px;
      border-radius: 10px;
      box-sizing: border-box;
      .icon {
        width: 14px;
        height: 14px;
      }
    }
  }
  .toolBox {
    display: flex;
    height: 40px;
    background-color: #fff;
  }
}

// 弹幕窗口初始化弹幕
@keyframes topMove {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
  }
}

.v-enter {
  opacity: 0;
  transform: translateY(30px);
}
.v-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.6s ease;
  // position: absolute;
}
// 下面的 .v-move 和 .v-leave-active 配合，能够实现列表后续的元素，渐渐飘上来的效果
.v-move {
  transition: all 0.6s ease;
}
.v-leave-active {
  position: absolute;
}
</style>
